<script lang="ts" setup>
defineProps<{
  id: number
  title: string
  active?: boolean
}>()

const { change } = useCategory()

</script>

<template>
  <view class="select_item" :class="active && 'active'" @click="change({ categoryId: id })">
    <text>{{ title }}</text>
  </view>
</template>

<style lang="scss" scoped>
.select_item {
  width: 260rpx;
  color: #555555;
  font-size: 20rpx;
  line-height: 40rpx;
  border-radius: 10rpx;
  padding-left: 20rpx;
  margin-bottom: 24rpx;
  background-color: #f7f7f7;

  &.active {
    color: #f38e48;
    background-color: rgba(255, 230, 212, 0.97);
  }
}
</style>
